<template>
	<view class="detailContainer">
		<!-- 头部轮播 -->
		<swiper class="detailBanner" indicator-dots autoplay circular>
			<swiper-item class="bannerItem">
				<image :src="detail.goods_image"></image>
			</swiper-item>
		</swiper>
		<!-- 中间详情 -->
		<view class="detailWrap">
			<!-- 价格部分 -->
			<view class="detailTop">
				<view class="AllPrice">
					<text class="nextPrice">￥{{detail.goods_price_min}}</text>
					<text class="prePrice">￥{{detail.goods_price_min}}</text>
				</view>
				<text class="count">已售{{detail.goods_sales}}件</text>
			</view>
			<!-- 商品内容部分 -->
			<view class="detailMiddle">
				<view class="left">{{detail.goods_name}}</view>
				<view class="right">
					<i class="iconfont icon-fenxiang"></i>
				</view>
			</view>
			<!-- 商家承诺 -->
			<view class="detailBottom">
				<view class="bottomLeft">
					<view class="bottomItem">
						<i class="iconfont icon-fuwu"></i>
						<text>七天无理由退货</text>
					</view>
					<view class="bottomItem">
						<i class="iconfont icon-fuwu"></i>
						<text>48小时发货</text>
					</view>
				</view>
				<i class="iconfont icon-arrow-right"></i>
			</view>
		</view>
		<!-- 商品描述 -->
		<view class="goodsDes">
			<view class="desTitle">商品描述</view>
			<view class="goodsImg">
				<image :src="detail.goods_image"></image>
			</view>
		</view>
		<!-- 加入购物车 -->
		<view class="buttomView">
			<view class="leftView">
				<view class="leftItem" @click="toIndexPage">
					<i class="iconfont icon-shouye"></i>
					<text>首页</text>
				</view>
				<view class="leftItem">
					<i class="iconfont icon-kefu1"></i>
					<text>客服</text>
				</view>
			</view>
			<view class="rightView">
				<button type="default">加入购物车</button>
				<button type="default">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				detail:{}
			};
		},
		methods:{
			// 获取商品的详细信息
			async getGoodsDetailInfo(){
				const id = this.$mp.query.goodsId
				const result = await request('goods/detail&goodsId=' + id)
				if(result.status === 200){
					this.detail = result.data.detail
				}
			},
			// 会首页
			toIndexPage(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		},
		mounted(){
			this.getGoodsDetailInfo()
		}
	}
</script>

<style lang="stylus">
.detailContainer
	.detailBanner
		height 800upx
		.bannerItem
			image
				width 100%
				height 100%
	.detailWrap
		padding 35upx 30upx
		.detailTop
			height 80upx
			line-height 80upx
			display flex
			justify-content space-between
			.AllPrice
				.nextPrice
					font-size 55upx
					color #fa2209
					margin-right 20upx
				.prePrice
					line-height 90upx
					font-size 35upx
					color #959595
					text-decoration line-through 
			.count
				line-height 90upx
				font-size 28upx
				color #959595
		.detailMiddle
			height 80upx
			line-height 80upx
			margin 20upx 0 
			display flex
			box-sizing border-box
			justify-content space-between
			.left
				font-size 32upx
				color #303133
				padding-right 40upx
				border-right 1upx solid #f4f4f4
			.right
				display flex
				flex-direction column
				align-items center
				.iconfont
					font-size 50upx
					padding-right 20upx
		.detailBottom
			height 100upx
			line-height 100upx
			background-color #fafafa
			display flex
			justify-content space-between
			padding-right 20upx
			.bottomLeft
				display flex
				.bottomItem
					display flex
					.iconfont
						color #fa2209
					text
						padding 0 40upx 0 15upx 
						font-size 30upx
						color #303133
	.goodsDes
		.desTitle
			margin 10upx 30upx 30upx
			font-size 36upx
			color #303133
		.goodsImg
			font-size 0
			height 800upx
			image
				width 100%
				height 100%
				display inline-block
	.buttomView
		display flex
		width 100%
		height 130upx
		background-color #fff
		padding 20upx 30upx
		box-sizing border-box
		position fixed
		left 0
		bottom 0
		justify-content space-between
		.leftView
			flex 1
			display flex
			justify-content space-around
			align-items center
			.leftItem
				display flex
				flex-direction column
				align-items center
				margin-right 50upx
				color #303133
				.iconfont
					font-size 50upx
				text
					font-size 28upx
		.rightView
			flex 2
			display flex
			button
				flex 1
				box-sizing border-box
				padding 0 30upx
				border-radius 60upx
				color #fff
				&:first-child
					background-color #ffb100
				&:last-child
					margin-left 10upx
					background-color #fa2b20
</style>
